<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<%@page contentType="text/html;charset=UTF-8"
	import="com.srit.forecast.constant.Constant"%>
<%@page pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="srit-tag" uri="/srit-constant-tag"%>
<srit-tag:Constant var="PAGE_TYPE_FORM" />
<srit-tag:Constant var="PAGE_TYPE_LIST" />
<srit-tag:Constant var="PAGE_TYPE_ALL" />
<srit-tag:Constant var="GRID_SUBJECT_ONE" />
<html>
<head>
<title></title>
<link href="<c:url value="/resources/css/style.css" />" rel="stylesheet"
	type="text/css">
<link href="<c:url value="/resources/css/list_css.css" />"
	rel="stylesheet" type="text/css">
<script src="<c:url value="/resources/js/jquery-1.8.0.min.js" />"></script>
</head>
<!--
${fn:containsIgnoreCase("ABCallIST", PAGE_TYPE_LIST)}
  -->
<!-- 搜索 -->
<c:if test="${pageType==PAGE_TYPE_ALL}">
	<div id="SearchDiv">
		<form:form commandName="searchForm" action="/pageConfig-search"
			method="post">

		</form:form>
	</div>
</c:if>


<!-- 列表页 -->
<c:if test="${pageType==PAGE_TYPE_LIST||pageType==PAGE_TYPE_ALL}">
	<div id="pageDiv">
		<table class="menu-table" align='center' width="98%"
			style="text-align: right">
			<tr>
				<td><a href="<c:url  value="/pageConfig-form"></c:url>">创建</a></td>
			</tr>
		</table>
		<table class="sritTable" align='center' id="table" width="98%"
			style="margin-top: 5px">
			<tr>
				<th><input type="checkbox" /></th>
				<th>NAME</th>
				<th>PAGEVALUE</th>
				<th>REMARK</th>
				<th>操作</th>
			</tr>
			<c:forEach var="rc" items="${page.list}">
				<tr onMouseOver="javascript:this.style.backgroundColor='#AABBFF';"
					onMouseOut="javascript:this.style.backgroundColor='#FFFFFF';"
					ondblclick="javascript:window.location='<c:url  value="/pageConfig-edit">
					<c:param name="id" value="${rc.id }"/>
					</c:url>'">
					<td><input type="checkbox" value="${rc.id }" /></td>
					<td>${rc.name }</td>
					<td>${rc.pageValue }</td>
					<td>${rc.remark }</td>
					<td><a
						href="<c:url  value="/grid">
					<c:param name="id" value="${rc.id }"/>
					</c:url>">进入</a>
					</td>
				</tr>
			</c:forEach>
		</table>

		<table class="sritTable" align='center' id="table" width="98%"
			style="margin-top: 0px">
			<tr>
				<td class="td_tl">${page.count},${page.pageNum}</td>
			</tr>
		</table>
	</div>
</c:if>

<!-- 表单页 -->
<c:if test="${pageType==PAGE_TYPE_FORM||pageType==PAGE_TYPE_ALL}">
	<div id="createDiv">
		<form:form modelAttribute="pageConfig"
			action="/pageConfig-saveOrUpdate" method="post">
			<form:hidden path="id" />
			<table class="sritTable" align='center' id="table" width="98%">
				<tr>
					<th colspan="4">页面配置</th>
				</tr>
				<tr>
					<td class="td_tl">页面名称</td>
					<td><form:input path="name" /></td>
					<td class="td_tl">页面地址（jsp页面名）</td>
					<td><form:input path="pageValue" /></td>
				</tr>
				<tr>
					<td class="td_tl">备注</td>
					<td colspan="3"><form:input path="remark" /></td>
				</tr>
				<tr>
					<td colspan="4" class="td_tl"><c:if
							test="${pageConfig.id==null}">
							<input type="submit" value="保存" />
						</c:if> <c:if test="${pageConfig.id!=null }">
							<input type="submit" value="修改" />
						</c:if> <input type="reset" /></td>
				</tr>
			</table>
		</form:form>


		<table class="sritTable" align='center' id="table" width="98%"
			style="margin-top: 5px">
			<tr>
				<th>GRID名称</th>
				<th>GRID类型</th>
				<th>GRID HTMLID</th>
				<th>GRID HTMLNAME</th>
				<th>GRID EFFECTTIME</th>
				<th>操作</th>
			</tr>
			<c:forEach items="${pageConfig.gridList}" var="grid">
				<tr align="center">
					<td>${grid.name }</td>
					<td>${grid.gridType }</td>
					<td>${grid.htmlId }</td>
					<td>${grid.htmlName }</td>
					<td>${grid.effectTime }</td>
					<td>修改</td>
				</tr>
			</c:forEach>
		</table>

		<table class="menu-son-form" align='center' width="98%"
			style="text-align: right">
			<tr>
				<td align="right"><a href="javascript:addGrid()">新增Grid</a></td>
			</tr>
		</table>
		<div id="gridFormDiv" style="display: none">
			<form:form action="/grid-saveOrUpdate?pageConfigId=${pageConfig.id}"
				modelAttribute="grid">
				<input type="hidden" name="configId" value="${pageConfig.id }" />
				<table class="sritTable" align='center' width="98%"
					style="text-align: left">
					<tr>
						<th colspan="8" class="td_tl"><font>Grid表单</font></th>
					</tr>

					<tr>
						<td class="td_tl">GRID名称</td>
						<td><input type="text" name="name"></td>
						<td class="td_tl">GRID_htmlId</td>
						<td><input type="text" name="htmlId" /></td>
						<td class="td_tl">GRID_htmlName</td>
						<td><input type="text" name="htmlName" /></td>
						<td class="td_tl">Grid类型</td>
						<td><select id="gridType" name="gridType">
								<c:forEach items="${gridTypeArr }" var="gridType">
									<option value="${gridType}">${gridType }</option>
								</c:forEach>
						</select> <span id="effectTimeSpan" style="visibility: hidden; color: Red">
								时效<input type="text" id="effectTime" name="effectTime" value="1"
								style="width: 30px" />
						</span></td>
					</tr>
					<tr>
						<td class="td_tl">grid 区域类型</td>
						<td><select name="subjectType" id="subjectType">
								<option value="">Please selected...</option>
								<c:forEach items="${subjectTypeArr }" var="subjectType">
									<option value="${subjectType}">${subjectType }</option>
								</c:forEach>
						</select></td>
						<td class="td_tl">码表类型值</td>
						<td><select name="codeType">
								<option value="">Please selected...</option>
								<c:forEach items="${codeTypeList}" var="codeType">
									<option value="${codeType.id}">${codeType.type }</option>
								</c:forEach>
						</select></td>
						<td class="td_tl">codeName</td>
						<td><input type="text" name="codeName"
							class="selectChangeText" disabled="disabled" /></td>
						<td class="td_tl">codeValue</td>
						<td><input type="text" name="codeValue"
							class="selectChangeText" disabled="disabled" /></td>
					</tr>

					<tr>
						<td class="td_tl">grid属性列表</td>
						<td colspan=7>
							<table width="100%" border="none" class="innerTable">
								<tr>
									<td width="20%"><select id="attrListSelect"
										multiple="multiple"
										style="width: 100%; height: 200px; margin-left: 2px">
											<c:forEach items="${gridAttributeList}" var="gridAttribute">
												<option value="${gridAttribute.id }">${gridAttribute.name}</option>
											</c:forEach>
									</select></td>
									<td>
										<table class="innerTable" width="100%">
											<tr>
												<td><a href="javascript:void(0)" id="addBasicRowLink">增加基本属性</a></td>
											</tr>
										</table>
										<table id="attrTable" class="innerTable" width="100%">
											<tr>
												<th width="20%">属性</th>
												<th width="10%">htmlName</th>
												<th width="10%">htmlId</th>
												<th width="20%">showName</th>
												<th width="20%">title</th>
												<th width="10%">width</th>
												<th width="10%">排序</th>
											</tr>
											<tr class="clone_row" style="display: none">
												<td align="center">&nbsp;</td>
												<td align="center"><input type="text" /></td>
												<td align="center"><input type="text" /></td>
												<td align="center"><input type="text" /></td>
												<td align="center"><input type="text" /></td>
												<td align="center"><input type="text"
													style="width: 30px" /></td>
												<td align="center"><input type="text"
													style="width: 30px" /></td>
											</tr>
										</table>
									</td>
								</tr>
							</table>
						</td>
					</tr>

					<tr>
						<td colspan="8" class="td_tl"><input type="submit" value="保存" />
							<input type="reset" value="重置" /></td>
					</tr>
				</table>
			</form:form>
		</div>
		<script>
			$(function() {
				$("#gridType").change(
						function() {
							$("#effectTimeSpan").css("visibility", "visible");
							if ($("#gridType option").index(
									$("#gridType option:selected")) > 0) {
								$("#effectTimeSpan").css("visibility",
										"visible");
							} else {
								$("#effectTimeSpan")
										.css("visibility", "hidden");
								$("#effectTime").val(0);
							}
						});
				reflashSelect();
				function reflashSelect() {
					$("#attrListSelect option")
							.unbind("dblclick")
							.dblclick(
									function() {
										var $selected = $("#attrListSelect option:selected");
										$selected.remove();
										//console.log($selected.text())
										//console.log($selected.val())
										//console.log($(this).val());
										addToTable($selected);
										reflashTable();
									})

					function addToTable($selected) {
						var $clone = $("#attrTable").find(".clone_row:first")
								.clone();
						//console.log($clone.html())
						$clone.css("display", "");
						var tdFirst = $clone.find("td:eq(0)");
						tdFirst.text($selected.text());
						tdFirst.append("<input type=hidden value='"
								+ $selected.val() + "'/>");
						//console.log($clone)
						$("#attrTable").append($clone);
					}
				}

				function reflashTable() {
					$.each($("#attrTable").find(".clone_row"), function(i, el) {
						$(el).unbind("dblclick");
						$(el).dblclick(
								function() {
									var tdFirst = $(this).find("td:eq(0)");
									var name = tdFirst.text();
									var value = tdFirst.find("input").val();
									//console.log(value);
									$("#attrListSelect").append(
											"<option value='"+value+"'>" + name
													+ "</option>")
									$(this).remove();
									reflashSelect();
								})
					});
					$.each($("#attrTable").find(".basicRow"), function(i, el) {
						$(el).unbind("dblclick");
						$(el).dblclick(function() {
							//console.log("11")
							$(this).remove();

						});

					})
					//修改
					//console.log($("#attrTable").find("tr:gt(1)").length)
					$.each($("#attrTable").find("tr:gt(1)"), function(i, el) {
						var attrValue = "relList[" + i + "]";
						$(el).find("input").each(function() {
							//console.log($(el).find("input").index(this))
							switch ($(el).find("input").index(this)) {
							case 0:
								$(this).attr("name", attrValue + ".attrId");
								break;
							case 1:
								$(this).attr("name", attrValue + ".htmlName");
								break;
							case 2:
								$(this).attr("name", attrValue + ".htmlId");
								break;
							case 3:
								$(this).attr("name", attrValue + ".showName");
								break;
							case 4:
								$(this).attr("name", attrValue + ".title");
								break;
							case 5:
								$(this).attr("name", attrValue + ".width");
								break;
							case 6:
								$(this).attr("name", attrValue + ".orderNo");
								break;
							default:
								break;
							}
						})
					})
				}

				$("#addBasicRowLink").click(
						function() {
							var $clone = $("#attrTable").find(
									".clone_row:first").clone();
							var tdFirst = $clone.find("td:eq(0)");
							tdFirst.text("基本属性");
							tdFirst.append("<input type='hidden' value=''/>")
							$clone.css("display", "");
							$clone.attr("class", "basicRow");
							$("#attrTable").append($clone);
							reflashTable();
						})

				$("#subjectType").change(function() {
					//console.log("change")
					if ($(this).val() == '${GRID_SUBJECT_ONE}') {
						//console.log('${GRID_SUBJECT_ONE}');
						$(".selectChangeText").attr("disabled", false);
					} else {
						$(".selectChangeText").attr("disabled", true);
					}
				})
			});
			addGrid();
			function addGrid() {
				if ($("#gridFormDiv").css("display") == "none") {
					$("#gridFormDiv").css("display", "");
				} else {
					$("#gridFormDiv form")[0].reset();
					$("#gridFormDiv").css("display", "none");
				}
			}
		</script>
	</div>
</c:if>
</html>




